<template>
  <PageWrapper>
    <a-card>
      <div style="margin-bottom: 20px">
        <!--        <a-row :gutter="[20,20]">-->
        <!--          <a-col :xs="24" :sm="6">-->

        <!--          </a-col>-->
        <!--          <a-col :xs="24" :sm="6">-->

        <!--          </a-col>-->
        <!--          <a-col :xs="24" :sm="6">-->

        <!--          </a-col>-->
        <!--          <a-col :xs="24" :sm="6">-->
        <!--            <a-space>-->
        <!--              <a-button :icon="h(SearchOutlined)" type="primary"> {{ t('sys.form.placeholder.inquire') }} </a-button>-->
        <!--              <a-button> {{ t('sys.login.forget')  }} </a-button>-->
        <!--            </a-space>-->
        <!--          </a-col>-->
        <!--        </a-row>-->
      </div>
      <a-table
        @change="handleTableChange"
        :pagination="pagination"
        :loading="loading"
        bordered
        :columns="configcolumns"
        :dataSource="dataSource"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'avatarUrl'">
            <a-image width="30px" :src="record.avatarUrl" />
          </template>
          <template v-if="column.dataIndex === 'status'">
            <a-tag v-if="record.status == 0" color="orange"> {{ t('sys.configuration.blockUp') }} </a-tag>
            <a-tag v-if="record.status == 1" color="green"> {{ t('sys.configuration.normal') }} </a-tag>
          </template>
          <template v-if="column.dataIndex === 'action'">
            <a-button @click="detailsClick(record)" type="link"> {{ t('sys.configuration.particulars') }} </a-button>
            <a-popconfirm :title="t('sys.configuration.IsDelete')" :ok-text="t('sys.configuration.comfig')" :cancel-text="t('sys.configuration.cancel')">
              <a-button danger type="link"> {{ t('sys.configuration.delete') }} </a-button>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
      <a-modal
        centered
        @ok="ModalShow = false"
        bordered
        width="80%"
        :title="t('sys.configuration.deviceDetails')"
        v-model:open="ModalShow"
      >
        <a-descriptions bordered title="Custom Size">
          <a-descriptions-item :label="t('sys.device.columns.deviceID')">{{ detailsRecord.id }}</a-descriptions-item>
          <a-descriptions-item :label="t('sys.device.columns.devicecode')">{{ detailsRecord.device }}</a-descriptions-item>
          <a-descriptions-item :label="t('sys.device.columns.devicename')">{{ detailsRecord.deviceName }}</a-descriptions-item>
          <a-descriptions-item label="MAC">{{ detailsRecord.Mac }}</a-descriptions-item>
          <a-descriptions-item :label="t('sys.configuration.describe')">{{ detailsRecord.remark }}</a-descriptions-item>
          <a-descriptions-item :label="t('sys.device.columns.status')">
            <a-tag v-if="detailsRecord.status == 0" color="orange"> {{ t('sys.configuration.blockUp') }} </a-tag>
            <a-tag v-if="detailsRecord.status == 1" color="green"> {{ t('sys.configuration.normal') }} </a-tag>
          </a-descriptions-item>
          <a-descriptions-item :label="t('sys.device.columns.userId')">{{ detailsRecord.userId }}</a-descriptions-item>
          <a-descriptions-item :label="t('sys.device.columns.remck')">{{ detailsRecord.owner }}</a-descriptions-item>
          <a-descriptions-item :label="t('sys.device.columns.validTime')">
            {{ detailsRecord.validTime }}
          </a-descriptions-item>
        </a-descriptions>
      </a-modal>
    </a-card>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { PageWrapper } from '@/components/Page';
  import { configcolumns } from './account.data';
  import { useI18n } from '@/hooks/web/useI18n';

  const { t } = useI18n();
  const pagination = ref({
    total: 0,
    current: 1,
    pageSize: 10,
  });
  const handleTableChange = (e) => {
    pagination.value = e;
    init();
  };
  const ModalShow = ref(false);
  const detailsRecord = ref({});
  const detailsClick = (record) => {
    ModalShow.value = true;
    detailsRecord.value = record;
  };
  const dataSource = ref([
    {
      id: 1,
      device: 'fasdfiennskf12321',
      deviceName: '设备名1',
      remark: '推特',
      status: 1,
      Mac: '12312321313123',
      validTime: '2025-11-1',
      userId: '13122131342342342',
      owner: '这是一台设备',
    },
    {
      id: 2,
      device: 'fasdfiennskf12321',
      deviceName: '设备名1',
      remark: '推特',
      Mac: '123213213213123123',
      status: 0,
      validTime: '2025-11-2',
      userId: '13122131342342342',
      owner: '这是2台设备',
    },
  ]);
  const loading = ref(true);
  const init = () => {
    loading.value = false;
    // postUserListPage({ size: pagination.value.pageSize, current: pagination.value.current }).then(
    //   (res) => {
    //     if (res.code == 200) {
    //       dataSource.value = res.data.records;
    //       pagination.value.total = res.data.total;
    //       loading.value = false;
    //     }
    //   },
    // );
  };
  onMounted(() => {
    init();
  });
</script>
